<template>
    <view class="createCustomer">
        <uni-nav-bar fixed left-icon="left" :title="title" @clickLeft="backHandle" class="unibarS">
            <block slot="right">
                <text class="sub-btn" @click="submit">保存</text>
            </block>
        </uni-nav-bar>
        <!-- 主要内容 -->
        <view class="customer-content">
            <u--form labelPosition="left" :model="params" ref="uForm" labelWidth="70">
                <u-form-item class="item-box" label="客户名称" @click="SelectCus()" required prop="userInfo.followType"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.customerId ? 'item-temp-text-empty' : ''">{{
                            params.customerName || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="跟进类型" required
                    @click="showSelect('followupType')" borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.followupType ? 'item-temp-text-empty' : ''">
                            {{ bus_followup_type[params.followupType] || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <!-- <u-form-item class="item-box" label="跟进时间" required @click="openCalendar(1)"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.followupTime ? 'item-temp-text-empty' : ''">{{
                            params.followupTime || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item> -->
                <u-form-item class="item-box" label="跟进时间" required
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <uni-datetime-picker v-model="params.followupTime">
                            <view :class="!params.followupTime ? 'item-temp-text-empty' : ''">{{ params.followupTime || '点击选择' }}</view>
                        </uni-datetime-picker>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="跟进内容" labelPosition="top" required borderBottom ref="item1">
                    <view style="width: 100%;">
                        <view class="item-follow-box" v-for="item in params.dynamicData" :key="item.code">
                            <text>{{ item.dictLabel }}：</text>
                            <u--input v-model="item.content" disabledColor="#ffffff"
                                placeholder="请输入"></u--input>
                        </view>
                    </view>
                </u-form-item>
                <u-form-item class="item-box" label="客户状态" required @click="showSelect('customerStatus')"
                    borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.customerStatus ? 'item-temp-text-empty' : ''">{{ bus_customer_status[params.customerStatus] ||
                            '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="上传照片" required @click="showPhoto()" prop="userInfo.photo" borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.photoUrl ? 'item-temp-text-empty' : ''">
                            {{ params.photoUrl || '点击选择' }}
                        </view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <u-form-item class="item-box" label="定位" @click="chooseAddressHandle()" borderBottom ref="item1">
                    <view class="item-temp-box">
                        <view :class="!params.locateName ? 'item-temp-text-empty' : ''">{{ params.locateName || '点击选择' }}</view>
                    </view>
                    <u-icon slot="right" name="arrow-right"></u-icon>
                </u-form-item>
                <view class="item-title">跟进计划</view>
                <u-form-item class="item-box" label="创建下次跟进任务" labelWidth="140" borderBottom ref="item1">
                    <view class="item-switch">
                        <u-switch v-model="isFollow" @change="changeSwitch" size="20"></u-switch>
                    </view>
                </u-form-item>
                <template v-if="isFollow">
                    <u-form-item class="item-box" label="跟进时间" required @click="openCalendar(2)"
                        borderBottom ref="item1">
                        <u--input v-model="params.nextFollowupRecord.followupTime" disabled disabledColor="#ffffff"
                            placeholder="点击选择" border="none"></u--input>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                    <u-form-item class="item-box" label="跟进内容" required prop="userInfo.followContent" borderBottom
                        ref="item1">
                        <u--input v-model="params.nextFollowupRecord.followupContent" border="none" placeholder="请填写"></u--input>
                    </u-form-item>
                    <u-form-item class="item-box" label="跟进人员" required prop="userInfo.salesman" @click="selectHandle()"
                        borderBottom ref="item1">
                        <view class="item-temp-box">
                            <view v-if="params.nextFollowupRecord.staffId" class="avatar-box">
                                <u-avatar class="avatar" size="25" :src="params.nextFollowupRecord.avatar"></u-avatar>
                                <text>{{ params.nextFollowupRecord.staffIdName }}</text>
                            </view>
                            <view v-else class="item-temp-text-empty">点击选择</view>
                        </view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                    <u-form-item class="item-box" label="任务提醒" prop="userInfo.remind" @click="showSelect('reminderType')"
                        borderBottom ref="item1">
                        <view class="item-temp-box">
                            <view :class="!params.nextFollowupRecord.reminderType ? 'item-temp-text-empty' : ''">{{
                                bus_followup_task[params.nextFollowupRecord.reminderType] || '点击选择' }}</view>
                        </view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                    <u-form-item class="item-box" label="提醒方式" @click="showSelect('reminderMethod')" borderBottom ref="item1">
                        <view class="item-temp-box">
                            <view :class="!params.nextFollowupRecord.reminderMethod ? 'item-temp-text-empty' : ''">{{
                                bus_reminder_method[params.nextFollowupRecord.reminderMethod] || '点击选择' }}</view>
                        </view>
                        <u-icon slot="right" name="arrow-right"></u-icon>
                    </u-form-item>
                </template>

            </u--form>
        </view>
        <!-- 弹出选择菜单 -->
        <u-action-sheet :show="showActionSheet" :actions="actions" title="请选择" @close="showActionSheet = false"
            @select="selectSelect">
        </u-action-sheet>
        <!-- 选择跟进日期 -->
        <uni-calendar ref="calendar" class="uni-calendar--hook" :clear-date="true" :date="info.date"
            :insert="info.insert" @confirm="confirmCalendar" @close="closeCalendar" />
    </view>
</template>

<script>
import { convertToDict, upImage } from '@/common/utils'
export default {
    data() {
        return {
            single: null,
            title: '新建跟进',
            showActionSheet: false,
            // 选择地区
            showPicker: false,
            params: {
                customerId: null,
                customerName: null,
                followupType: null,
                followupTime: null,
                customerStatus: null,
                photoUrl: null,
                locateName: null,
                dynamicData: [],
                nextFollowupRecord: {
                    reminderMethod: null,
                    reminderType: null,
                    followupTime: null,
                    staffId: null,
                    staffIdName: null,
                    avatar: null,
                    followupContent: null
                }
            },
            isFollow: false,
            // 弹出底部弹出菜单，展示的集合
            actions: [],
            // 跟进类型
            bus_followup: [],
            bus_reminder_method: null,
            // 客户状态
            bus_customer: [],
            bus_customer_status: null,

            // 提醒方式
            bus_reminder: [],
            bus_reminder_method: null,
            // 任务提醒
            bus_followup: [],
            bus_followup_task: null,

            // 跟进内容
            bus_followup_field_management: [],
            openCalendarType: 1,
            radio: '',
            switchVal: false,
            count: 4,
            value: 2,
            // 存储属性，用于保存当前正在编辑的表单项
            tempPropName: null,
            showCalendar: false,
            info: {
                insert: false,
                selected: []
            }
        }
    },
    onLoad(options) {

        console.log(options)
        if(options.cId && options.cName) {
            this.params.customerName = options.cName
            this.params.customerId = options.cId
        }

        // 跟进类型
        this.bus_followup = JSON.parse(uni.getStorageSync('bus_followup_type'))
        this.bus_followup_type = convertToDict(this.bus_followup)
        // 客户状态
        this.bus_customer = JSON.parse(uni.getStorageSync('bus_customer_status'))
        this.bus_customer_status = convertToDict(this.bus_customer)

        // 提醒方式
        this.bus_reminder = JSON.parse(uni.getStorageSync('bus_reminder_method'))
        this.bus_reminder_method = convertToDict(this.bus_reminder)

        // 任务提醒
        this.bus_followup_t = JSON.parse(uni.getStorageSync('bus_followup_task'))
        this.bus_followup_task = convertToDict(this.bus_followup_t)

        // 跟进内容
        this.bus_followup_field_management = JSON.parse(uni.getStorageSync('bus_followup_field_management'))
        this.params.dynamicData = this.bus_followup_field_management.map(item => {
            return {
                dictLabel: item.dictLabel,
                code: item.dictValue,
                content: ''
            }
        })
    },
    methods: {
        // 显示选择器
        showSelect(propName) {
            // 客户类型
            if (propName == 'followupType') {
                this.actions = this.bus_followup
            } else if(propName == 'customerStatus') {
                this.actions = this.bus_customer
            } else if(propName == 'reminderMethod') {
                this.actions = this.bus_reminder
            } else if(propName == 'reminderType') {
                this.actions = this.bus_followup_t
            }
            this.tempPropName = propName
            this.showActionSheet = true
        },
        // 选择客户
        SelectCus() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectCustomer',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        that.params.customerId = data.data.id
                        that.params.customerName = data.data.customerName
                    },
                },
                success: function (res) {
					let obj = {
                        id: that.params.customerId,
                        customerName: that.params.customerName
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        selectSelect(e) {
            this.params[this.tempPropName] = e.dictValue
            if(this.tempPropName == 'reminderMethod') {
                this.params.nextFollowupRecord.reminderMethod = e.dictValue
            } else if(this.tempPropName == 'reminderType') {
                this.params.nextFollowupRecord.reminderType = e.dictValue
            }
            
            // this.$refs.uForm.validateField('userInfo.' + this.tempPropName)
        },
        chooseAddressHandle() {
            let that = this
            uni.chooseLocation({
                success: function (res) {
                    that.params.locateName = res.name + res.address
                }
            });
        },
        // 选择业务员
        selectHandle() {
            let that = this
            uni.navigateTo({
                url: '/pages/crm/customer/selectSalesman',
                events: {
                    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
                    someEvent: function (data) {
                        console.log(data)
                        that.params.nextFollowupRecord.staffId = data.data.userId
                        that.params.nextFollowupRecord.staffIdName = data.data.userName
                        that.params.nextFollowupRecord.avatar = data.data.avatar
                    },
                },
                success: function (res) {
                    console.log('success:' + JSON.stringify(res))
                    let obj = { 
                        userId: that.params.nextFollowupRecord.staffId,
                        userName: that.params.nextFollowupRecord.staffIdName,
                        avatar: that.params.nextFollowupRecord.avatar
                    }
                    res.eventChannel.emit('emitDataHandle', { data: obj })
                }
            });
        },
        // 打开日历
        openCalendar(type) {
            this.openCalendarType = type
            this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
            console.log(e)
            if(this.openCalendarType == 1) {
                this.params.followupTime = e.fulldate
            } else {
                this.params.nextFollowupRecord.followupTime = e.fulldate
            }
        },
        // 关闭日历
        closeCalendar() { },
        showPhoto() {
            let that = this
            uni.chooseImage({
                count: 1,
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: function (res) {
                    // console.log(res);
                    // console.log(res.tempFilePaths);
                    upImage(res.tempFilePaths).then(res => {
                        // console.log(res)
                        that.params.photoUrl = res[0]
                    })
                }
            });
        },
        confirm(e) {
            // console.log('confirm', e)
            this.model1.userInfo.city = e.value[0].label
            this.showPicker = false
        },
        submit() {

            if(!this.params.customerId) return uni.$u.toast('请选择客户')
            if(!this.params.followupType) return uni.$u.toast('请选择跟进类型')
            if(!this.params.followupTime) return uni.$u.toast('请选择跟进时间')
            if(!this.params.dynamicData) return uni.$u.toast('请填写跟进内容')
            if(!this.params.customerStatus) return uni.$u.toast('请填写客户状态')
            if(!this.params.photoUrl) return uni.$u.toast('请上传照片')
            if(this.isFollow){
                if(!this.params.nextFollowupRecord.followupTime) return uni.$u.toast('请选择下次跟进时间')
                if(!this.params.nextFollowupRecord.followupContent) return uni.$u.toast('请填写下次跟进内容')
                if(!this.params.nextFollowupRecord.staffId) return uni.$u.toast('请选择下次跟进人员')
            }
            let obj = JSON.parse(JSON.stringify(this.params))
            obj.dynamicData = JSON.stringify(obj.dynamicData)
            this.$http.post('/app/followup_record/addRecord', obj).then(res => {
                let data = res.data
                if (data.code == 200) {
                    uni.showToast({ title: '成功', duration: 1000 });
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 1000)
                } 
            })
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
.unibarS {
    /deep/.uni-navbar__header {
        padding: 0 32rpx;
    }

    /deep/.uni-navbar__content {
        border-bottom: none !important;
        box-shadow: 0px 0px 4px rgba(136, 136, 136, 0.12);
    }

    .sub-btn {
        font-size: 32rpx;
        font-weight: 400;
        color: rgba(77, 172, 177, 1);
    }
}

.createCustomer {

}

.customer-content {
    margin: 20rpx 0;
}

.item-box {
    border-radius: 16rpx;
    background: rgba(255, 255, 255, 1);
    padding: 0 32rpx;

    /deep/.u-input__content__field-wrapper__field {
        text-align: right !important;
    }

    .rate-box,
    .item-switch {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }

    .item-follow-box {
        display: flex;
        align-items: center;
        margin: 20rpx 0;
        > text {
            width: 84rpx;
            margin-right: 20rpx;
        }
    }
}

.item-title {
    padding: 48rpx 32rpx 20rpx 32rpx;
    font-size: 32rpx;
    font-weight: 500;
    color: rgba(12, 16, 25, 1);
}

.item-temp-box {
    flex: 1;
    text-align: right;
    width: 0;
    font-size: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    >view {
        // 超出隐藏
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.item-temp-text-empty {
    font-size: 30rpx;
    font-weight: 400;
    color: rgba(100, 117, 136, 1);
}

.avatar-box {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .avatar {
        margin-right: 10rpx;
    }
}
</style>